<template>
  <div class="box">
    <div class="yi">
      <p>嗨购后台管理系统登录</p>
      <el-form ref="ruleFormRef" :model="user" status-icon label-width="120px" :rules="rules">
        <el-form-item label="输入用户名" prop="name" required>
          <el-input v-model="user.name" type="text" autocomplete="off" clearable @keyup.enter="login()"
            placeholder="请输入至少两位的账号名" />
        </el-form-item>
        <el-form-item label="输入密码" prop="pwd" required>
          <el-input type="password" v-model="user.pwd" autocomplete="off" :show-password="true" clearable
            @keyup.enter="login()" placeholder="请输入3-8位字母或数字或下划线的字符" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import service from '../utils/service'
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
import getRoutes from '../Threedes/router'
import getMenus from "../Threedes/menudata";
const user = ref({
  name: "",
  pwd: "",
});
const validateAdminname = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else if (/^.{2,10}$/.test(value) == false) {
    callback(new Error("请输入符合至少两位的账号名"));
  } else {
    callback();
  }
};

const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (/^\w{3,8}$/.test(value) == false) {
    callback(new Error("请输入3-8位字母或数字或下划线的字符"));
  } else {
    callback();
  }
};
const rules = ref({
  pwd: [{ validator: validatePassword, trigger: "change" }],
  name: [{ validator: validateAdminname, trigger: "change" }],
});
const router = useRouter();
const login = () => {
  service({
    url: "admin/login",
    method: "post",
    data: {
      adminname: user.value.name,
      password: user.value.pwd,
    },
  }).then((res) => {
    if (user.value.name == "" || user.value.pwd == "") {
      ElMessage({
        message: "用户和密码不能为空",
        type: "error",
      });
    } else {
      if (res.data.code == "200") {
        ElMessage({
          message: "登录成功",
          type: "success",
        });
        sessionStorage.setItem("adminname", res.data.data.adminname);
        sessionStorage.setItem("token", res.data.data.token);
        sessionStorage.setItem("grants", JSON.stringify(res.data.data.checkedkeys));
        let Token = sessionStorage.getItem("token");
        getMenus()
        
        router.push("./sheet");
      } else if (res.data.code == "10003") {
        ElMessage({
          message: "密码错误",
          type: "warning",
        });
      } else if (res.data.code == "10005") {
        ElMessage({
          message: "未注册",
          type: "error",
        });
      }
    }
  });
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background: url(https://www.zy-cam.com/res/jetcms/img/login/bg.jpg) center / 100% 100%;
}

.yi {
  width: 400px;
  /* border: 1px solid black; */
  border-radius: 5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

p {
  font-size: 25px;
  color: white;
}

.el-input {
  width: 200px;
}
</style>